<template>
    <div>
        <div id="mainL3" style="width: 100%;height:12.5rem;position: absolute;left: 0;right: 0;top: 0.625rem;margin: auto;">
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetCarByProcess } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    RequestStatisticGetCarByProcess().then((res: any) => {
        console.log('res', res.resultObj);
        var chartDom = document.getElementById('mainL3');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            grid: {
                left: '10%',
                right: '10%',
                bottom: '3%',
                top: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#666666'],
                        width: 1,
                        type: 'dotted'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: res.resultObj.name
            },
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgba(18, 155, 255, 0)' },
                { offset: 1, color: 'rgba(18, 155, 255, 1)' }
            ]), // 左右渐变色
            series: [
                {
                    name: '3011',
                    type: 'bar',
                    data: res.resultObj.nums
                }
            ]
        };
        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>